/**
 * Created by DELL on 2017/6/1.
 */

import  React from 'react';
import {
    View,
    Text,
    TouchableHighlight,
    Image,
    TextInput,
    ScrollView,
    ListView,
    TouchableWithoutFeedback,
    TouchableNativeFeedback
} from 'react-native';

import BaseComponent, {base} from '../../base/Base' ;
import Swiper  from 'react-native-swiper';
import *as wechat from 'react-native-wechat'

import SwiperPage from '../test/SwiperPage'

let {APP_ID_DEBUG }= base.fields;

//home  页
export default class HomePage extends BaseComponent {
    static defaultProps = {
        title: 'home'
    };

    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            recommendHouseDatas: ds.cloneWithRows([
                {
                    "id": "bdfc61e5-cc82-4de3-857d-e5f359f3f960",
                    'imageUrl': 'http://121.40.123.233:9601/images/c4df413f-3e94-4b53-998f-c1bff8f550f5.jpg',
                    "slogan": "人生的驿站，迷茫时的路灯",
                },
                {
                    "id": "8b2241bb-fb05-4835-b5c6-72d783075439",
                    'imageUrl': 'http://121.40.123.233:9601/images/bdfc61e5-cc82-4de3-857d-e5f359f3f960.jpg',
                    "slogan": "一盏灯一个屋檐一张柔软的床",
                },
                {
                    'imageUrl': 'http://121.40.123.233:9601/images/426a75c8-2093-4f0d-973e-6c4e5d4162bd.jpg',
                    "slogan": "陌生城市的避风港",
                    "id": "04b67b4c-0575-44c8-9ceb-41ef2fbbdd7f",
                },
            ]),
            recommendHouseDatas_swiper: [
                {
                    "id": "760bbcd5-ce14-406f-a7c7-ee0af18341f8",
                    "imageUrl": "http://121.40.123.233:9601/images/760bbcd5-ce14-406f-a7c7-ee0af18341f8.jpg",
                    "distance": 5850.960267061346,
                    "slogan": "一个拼搏过后栖息的港湾",
                    "tags": [
                        {
                            "tagName": "近地铁",
                            "tagColorType": 0
                        },
                        {
                            "tagName": "近商圈",
                            "tagColorType": 1
                        }
                    ],
                    "logo": "橙家",
                    "houseName": "橙家公寓"
                },
                {
                    "id": "00367a45-6138-4fd6-a015-967d8f7990b6",
                    "imageUrl": "http://121.40.123.233:9601/images/00367a45-6138-4fd6-a015-967d8f7990b6.jpg",
                    "distance": 6361.926191305804,
                    "slogan": "你在摩都的第一个家",
                    "tags": [
                        {
                            "tagName": "近商圈",
                            "tagColorType": 1
                        },
                        {
                            "tagName": "轻奢装修",
                            "tagColorType": 3
                        }
                    ],
                    "logo": "摩都",
                    "houseName": "摩都公寓"
                },
                {
                    "id": "bdfc61e5-cc82-4de3-857d-e5f359f3f960",
                    "imageUrl": "http://121.40.123.233:9601/images/bdfc61e5-cc82-4de3-857d-e5f359f3f960.jpg",
                    "distance": 14537.560234955375,
                    "slogan": "一盏灯一个屋檐一张柔软的床",
                    "tags": [
                        {
                            "tagName": "近地铁",
                            "tagColorType": 0
                        },
                        {
                            "tagName": "轻奢装修",
                            "tagColorType": 3
                        }
                    ],
                    "logo": "橘子",
                    "houseName": "橘子公寓"
                }

            ],

            hotShoppingDatas: ds.cloneWithRows([
                {
                    "goodsName": "香草星冰乐（超大）",
                    "goodsPrice": "35",
                    "imgUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/ed733a9f-f9ce-4b8d-8b34-f68a2962812f",
                    "id": "395a36ce-30dd-4a85-91aa-d15b16003324"
                },
                {
                    "goodsName": "极地牛乳1.2磅   Cheese Polar Milk",
                    "goodsPrice": "168",
                    "imgUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/9ccc5151-b44f-4f46-b6cf-d55bdfa894a2",
                    "id": "8c6618ea-aa25-4d44-97ca-81619e1e84d7"
                },
                {
                    "goodsName": "日常保洁",
                    "goodsPrice": "35",
                    "imgUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/3fb5124b-7c29-4731-8c5b-ed8f4f8e5490",
                    "id": "95ada907-1d25-43a4-93ba-b1338e9c3730"
                },
                {
                    "goodsName": "中式油烟机清洗",
                    "goodsPrice": "120",
                    "imgUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/0d8a3156-25ed-42e9-9f78-dd78b19e5764",
                    "id": "d6fea078-303f-457e-84a4-c3d4df616c9d"
                }

            ]),
            articalDatas: ds.cloneWithRows([
                {
                    "title": "生日有惊喜！在魔都无论哪天生通通有福利！ ",
                    "imageUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/c2349161-6e8c-4a3e-95a0-fac9aa576abe",
                    "smallImageUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/4579dce9-5276-4560-8431-293e02c10735",
                    "description": "这些餐厅对生日顾客有好礼哦~",
                    "linkUrl": "http://im.innjia.com/innjia/share.html?id=3effe5cc-f235-4fd9-90eb-c674ef939984",

                },
                {
                    "title": "这些有趣的地方你一定没去过！魔都的隐藏地图大公开！ ",
                    "imageUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/c19ce7fa-40f7-44fd-a8df-0f43cc962cc9",
                    "smallImageUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/1fdd88a6-7612-4754-8ae3-2c7113437e6d",
                    "description": "你不知道的魔都隐藏美景",
                    "linkUrl": "http://im.innjia.com/innjia/share.html?id=e70e009f-4962-47fe-be2a-0bb1f8e6ac17",

                },
                {
                    "title": "螺蛳壳里做道场的13种方法 ",
                    "imageUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/3671e488-b2a0-499d-8986-356a6f2406cc",
                    "smallImageUrl": "http://7xsx9h.com1.z0.glb.clouddn.com/0cb41b2c-de78-4aa3-b55f-9c3ac1d62bfe",
                    "description": "租住空间小的宝宝必看！13个把空间变大的魔法！",
                    "linkUrl": "http://im.innjia.com/innjia/share.html?id=b02cbb1a-62b5-41ee-910e-c3fef574a38c",


                }

            ])
        };

        console.log("home constructor")
    }
    componentWillMount(){

        console.log("home componentWillMount")
    }
    componentDidMount(){

        console.log("home componentDidMount")
    }

    // 搜索
    // banner 推荐位
    // 热销推荐
    // 商品列表

// <View style={base.styles.home_row_container_color_margin0}>
// <ListView
// contentContainerStyle={base.styles.home_recommend_list}
// dataSource={this.state.recommendHouseDatas}
// renderRow={(rowData) => {
//     return <HomeRecommendItem
//         dataSource={rowData}
//         onPress={(itemData) => {
//             this._recommendPress(itemData);
//         }}
//     />
// }}
// stickySectionHeadersEnabled={true}
// />
// </View>

    _getSwiperView(){
        let swiperViews=[];
        swiperViews.push( <HomeRecommendItem
            key={0}
            dataSource={this.state.recommendHouseDatas_swiper[0]}
            onPress={(itemData) => {
                this._recommendPress(itemData);
            }}
        />)
        swiperViews.push( <HomeRecommendItem
            key={1}
            dataSource={this.state.recommendHouseDatas_swiper[1]}
            onPress={(itemData) => {
                this._recommendPress(itemData);
            }}
        />)
        swiperViews.push( <HomeRecommendItem
            key={2}
            dataSource={this.state.recommendHouseDatas_swiper[2]}
            onPress={(itemData) => {
                this._recommendPress(itemData);
            }}
        />)

        return swiperViews;
    }

    render() {
        return (
            <ScrollView >
                {/*banner 位处理*/}
                <Image source={require('../../imgs/home/home_banner.jpg')}
                       style={base.styles.home_image_banner}>
                    <Text style={base.styles.home_text_banner_desc}>美好租住生活</Text>
                </Image>

                {/*四个导航条*/}

                <View style={base.styles.home_navigate_container}>

                    <HomeNavigateImage
                        onPress={() => {
                            this._findhousePress();
                        }}
                        textName='管家配房'
                        image_url={require('../../imgs/home/findhouse.png')}
                    />
                    <HomeNavigateImage
                        onPress={() => {
                            this._rentPress();
                        }}
                        textName='房租月付'
                        image_url={require('../../imgs/home/rent.png')}
                    />
                    <HomeNavigateImage
                        onPress={() => {
                            this._spuerLifePress();
                        }}
                        textName='生活服务'
                        image_url={require('../../imgs/home/life_server.png')}
                    />
                    <HomeNavigateImage
                        onPress={() => {
                            this._spuerShoppingPress();
                        }}
                        textName='品质商品'
                        image_url={require('../../imgs/home/super_shopping.png')}
                    />
                </View>

                {/*推荐公寓*/}
                <View style={base.styles.home_row_container_color}>


                    <Text style={{fontSize:8}}>◆  </Text>
                    <Text
                        style={[base.styles.home_text_18_212121, base.styles.paddingTop_10, base.styles.paddingBottom_10]}>推荐公寓</Text>
                    <Text style={{fontSize:8}}>  ◆</Text>
                </View>
                {/*公寓展示*/}


                <View>
                    <Swiper
                        height={170}
                        loop={true}
                        showsButtons={false}
                        index={0}
                        autoplay={true}
                        horizontal={true}
                        showsPagination={false}

                    >
                        {this._getSwiperView()}

                    </Swiper>

                </View>



                {/*热销优品*/}
                <View style={base.styles.home_row_container_color}>
                    <Text style={{fontSize:8}}>◆  </Text>
                    <Text
                        style={[base.styles.home_text_18_212121, base.styles.paddingTop_10, base.styles.paddingBottom_10]}>热销优品</Text>
                    <Text style={{fontSize:8}}>  ◆</Text>
                </View>

                {/*热销优品 展示列表*/}

                <View style={base.styles.home_row_container_color_margin0}>
                    <ListView
                        contentContainerStyle={base.styles.home_recommend_list}
                        dataSource={this.state.hotShoppingDatas}
                        renderRow={(rowData) => {
                            return <HomeHotShoppingItem
                                dataSource={rowData}
                                onPress={(itemData) => {
                                    this._hotShoppingPress(itemData);
                                }}
                            />
                        }}
                        stickySectionHeadersEnabled={true}
                    />
                </View>

                {/*发现生活*/}
                <View style={base.styles.home_row_container_color}>


                    <Text style={{fontSize:8}}>◆  </Text>
                    <Text
                        style={[base.styles.home_text_18_212121, base.styles.paddingTop_10, base.styles.paddingBottom_10]}>发现生活</Text>
                    <Text style={{fontSize:8}}>  ◆</Text>
                </View>

                {/*发现生活 展示列表*/}

                <View style={base.styles.home_row_container_color_margin0}>
                    <ListView
                        contentContainerStyle={base.styles.home_artical_list}
                        dataSource={this.state.articalDatas}
                        renderRow={(rowData) => {
                            return <HomeArticalItem
                                dataSource={rowData}
                                onPress={(itemData) => {
                                    this._ariticalPress(itemData);
                                }}
                            />
                        }}
                        stickySectionHeadersEnabled={true}
                    />


                </View>
                <View style={{backgroundColor:'#F5F5F5',height:50,}}>

                </View>
            </ScrollView>
        )
    }
        //跳转到其他页面
      _jumpToOtherPage(lable,params){
        this.props.navigation.navigate(lable,params);
    }

    _findhousePress(itemData) {
        // base.toastShort('找房');
        this._jumpToOtherPage('ButlerFoundHouse',{butlerId:"http://wx.innjia.com/h5v2/dev/findroom/src/html/recommendHouseList.html",
        title:'管家配房',tagInfo:"管家配房"})
    }

    _rentPress() {
        // base.toastShort('月付');
        this._jumpToOtherPage('ButlerFoundHouse',{butlerId:"http://wx.innjia.com/h5v2/test/rentContract/WEB-INF/views/default/monthlyPayRent.html",title:'房租月付',tagInfo:'房租月付'})
    }

    _spuerLifePress() {
        // base.toastShort('生活服务');
        this._jumpToOtherPage('LifeServer',{title:"生活服务"})
    }

    //品质商品 条目点击响应事件
    _spuerShoppingPress() {
        base.toastShort('还在开发中...');
    }

    //推荐房源 条目点击响应事件
    _recommendPress(itemData) {
        this._jumpToOtherPage('ButlerFoundHouse',{butlerId:"http://wx.innjia.com/h5v2/test/findroom/src/html/apartmentDetail.html?apartmentId="+itemData.id,
            title:'公寓好房',tagInfo:"公寓好房"})
    }

    //热销优品 条目点击响应事件
    _hotShoppingPress(itemData) {
        this._jumpToOtherPage('GoodsDetailPage',{goodId:itemData.id});
        // this._jumpToOtherPage('PayPage', {isFromOrder: true, orderId:'681dc8ed03234427b914b517e8164b0b'})
        // this._jumpToOtherPage('OrderDetailPage', {isFromOrder: true, orderId:'eb0262754066451e95eda30cb78b1795'})
    }

    //发现文章 条目点击响应事件
    _ariticalPress(itemData) {
        this._jumpToOtherPage('FindArticalPage',{articalData:itemData});
    }


}

//发现文章 自定义组件
class HomeArticalItem extends BaseComponent {

    render() {
        let data = this.props.dataSource;
        return (
            <TouchableHighlight
                onPress={this.props.onPress.bind(this, data)}
                underlayColor='#00000000'
            >
                <View
                    style={base.styles.home_artical_containter}
                >

                    <Image style={base.styles.home_artical_image} source={{uri: data.smallImageUrl}}/>

                    <View style={{marginLeft: 15, marginRight: 120}}>
                        <Text
                            style={base.styles.home_text_16_212121}>
                            {data.title}
                        </Text>
                        <Text
                            style={base.styles.home_text_16_212121}>
                            {data.description}
                        </Text>

                    </View>

                </View>
            </TouchableHighlight>
        )
    }

}

//热销优品 自定义组件
class HomeHotShoppingItem extends BaseComponent {

    render() {
        let data = this.props.dataSource;
        return (
            <TouchableHighlight
                onPress={this.props.onPress.bind(this, data)}
                underlayColor='#00000000'
            >
                <View
                    style={base.styles.home_hot_containter}
                >

                    <Image style={base.styles.home_recommend_image} source={{uri: data.imgUrl}}/>
                    <Text
                        style={base.styles.home_text_16_212121}>
                        {data.goodsName}
                    </Text>
                    <Text
                        style={base.styles.home_text_16_212121}>
                        价格¥ :{data.goodsPrice}
                    </Text>
                </View>
            </TouchableHighlight>
        )
    }

}

//推荐公寓 自定义组件
// class HomeRecommendItem extends BaseComponent {
//
//     render() {
//         let data = this.props.dataSource;
//         return (
//             <TouchableHighlight
//                 onPress={this.props.onPress.bind(this, data)}
//             >
//                 <View
//                     style={base.styles.home_recommend_containter}
//                 >
//
//                     <Image style={base.styles.home_recommend_image} source={{uri: data.imageUrl}}/>
//                     <Text
//                         style={[base.styles.home_text_16_212121,{minHeight:50,maxHeight:50,textAlign:'center'}]}>
//                         {data.slogan}
//                     </Text>
//                 </View>
//             </TouchableHighlight>
//         )
//     }
//
// }

//推荐公寓 自定义组件
class HomeRecommendItem extends BaseComponent {

    render() {
        let data = this.props.dataSource;
        return (
            <TouchableHighlight

                onPress={this.props.onPress.bind(this, data)}
            >
                <View
                    style={{
                        height:160,
                        backgroundColor:base.StyleConfig.color_FFFFFF,
                        padding: 5,
                        margin: 3,
                        borderWidth: 1,
                        borderRadius: 5,
                        borderColor: '#CCC',
                        flexDirection:'row',
                    }}
                >
                    <Image style={{height:150,width:213,borderRadius: 5,}} source={{uri: data.imageUrl}}/>
                    <View style={{justifyContent:'center',flex:1,}}>
                        <Text
                            style={[base.styles.home_text_16_212121,{fontSize:14}]}>
                            {data.logo}
                        </Text>
                        <Text
                            style={[base.styles.home_text_16_212121,{fontSize:14}]}>
                            {data.houseName}
                        </Text>
                        <Text
                            style={[base.styles.home_text_16_212121,{}]}>
                            {data.slogan}
                        </Text>
                        <View style={{flexDirection:'row',padding:5,}}>
                            <Text style={{backgroundColor:'#0ff',borderRadius:5,textAlign:'center',padding:3}} >  {data.tags[0].tagName}</Text>
                            <Text style={{backgroundColor:'#f0f',borderRadius:5,marginLeft:15,textAlign:'center',padding:3}}>  {data.tags[1].tagName}</Text>

                        </View>
                    </View>

                </View>
            </TouchableHighlight>
        )
    }

}


//导航图片和文字 自定义组件
class HomeNavigateImage extends BaseComponent {

    render() {
        return (
            <TouchableWithoutFeedback
                onPress={this.props.onPress}
            >

                <View
                    style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 8, paddingBottom: 8,}}
                >

                    <Image source={ this.props.image_url}

                           style={ {width: 54, height: 54, marginBottom: 7} }
                    />
                    <Text

                        style={{fontSize: 12, color: '#212121'}}>{this.props.textName}</Text>

                </View>

            </TouchableWithoutFeedback>



        )
    }

}
